<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import Toolbar from "@/components/Toolbar/index.vue";
defineOptions({
  name: "Home",
});

// 获取屏幕边界到安全区域距离
let safeAreaInsets;
let systemInfo;

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo();
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null;
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync();
safeAreaInsets = systemInfo.safeAreaInsets;
// #endif

const readOnly = ref(false);
const formats = ref<any>({});
const editorCtx = ref(null);
const onStatusChange = (e) => {
  formats.value = e.detail;
};
const onEditorReady = () => {
  // #ifdef MP-BAIDU
  editorCtx.value = requireDynamicLib("editorLib").createEditorContext("editor");
  // #endif
  // #ifdef APP-PLUS || MP-WEIXIN || H5
  uni
    .createSelectorQuery()
    .select("#editor")
    .context((res) => {
      editorCtx.value = res.context;
    })
    .exec();
  // #endif
};

const onInput = (e) => {
  console.log(e);
};

// 测试 uni API 自动引入
onLoad(() => {});
</script>

<template>
  <view
    class="bg-white h-[100vh] flex flex-col wrapper"
    :style="{ marginTop: `${safeAreaInsets?.top}px` }"
  >
    <input
      class="uni-input h-[60px] font-bold text-[24px] px-[10px]"
      focus
      placeholder="标题"
    />
    <view class="editor-wrapper h-full overflow-hidden overflow-y-auto px-[10px]">
      <editor
        id="editor"
        class="ql-container !h-full"
        placeholder="开始输入..."
        show-img-size
        show-img-toolbar
        show-img-resize
        @statuschange="onStatusChange"
        :read-only="readOnly"
        @ready="onEditorReady"
        @input="onInput"
      >
      </editor>
    </view>
    <Toolbar v-if="editorCtx" :editorCtx="editorCtx" />
  </view>
</template>

<style scoped lang="scss">
.wrapper {
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
